<template lang="pug">
Chart(:options='options')
</template>

<script setup name="ChartLine">
import Chart from './index.vue'
import _ from 'lodash-es'
const props = defineProps({
  chartData: {
    type: Object,
    default: () => {
      return {}
    }
  },
  chartOption: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const defaultOption = {
  title: {
    text: '',
    x: 'left',
    textStyle: {
      fontSize: 14,
      color: '#ACC9E6'
    }
  },
  tooltip: {
    trigger: 'axis',
    confine: true, // 是否将 tooltip 框限制在图表区域内
    backgroundColor: 'rgba(65, 147, 255, 0.8)',
    borderColor: '#4193ff',
    textStyle: {
      color: '#ffffff'
    },
    axisPointer: {
      lineStyle: {
        color: '#99f9fd'
      }
    }
  },
  legend: {
    top: 0,
    left: 6,
    itemWidth: 12,
    itemHeight: 6,
    show: false,
    textStyle: {
      color: '#ffffff',
      fontSize: 8
    }
  },
  grid: {
    left: 10,
    right: 10,
    top: 10,
    bottom: 10,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false,
      alignWithLabel: true,
      interval: '0'
    },
    axisLabel: {
      show: true,
      interval: 'auto',
      fontSize: 8,
      color: '#ffffff'
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: 'rgba(65, 147, 255, 1)',
        type: 'solid'
      }
    },
    splitLine: {
      show: false
    },
    zlevel: 3,
    data: []
  },
  yAxis: {
    type: 'value',
    name: '',
    nameTextStyle: {
      fontSize: 8,
      color: '#999999'
    },
    axisLabel: {
      show: true,
      align: 'right',
      fontSize: 8,
      color: '#ffffff'
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: ['rgba(212, 212, 216, 0.2)'],
        type: 'solid'
      }
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['rgba(65, 147, 255, 0.2)'],
        type: 'solid'
      }
    }
  }
}

const options = computed(() => {
  const option = {
    title: _.assign({}, defaultOption.title, props.chartOption.title || {}),
    tooltip: _.assign({}, defaultOption.tooltip, props.chartOption.tooltip || {}),
    grid: _.assign({}, defaultOption.grid, props.chartOption.grid || {}),
    legend: _.assign({}, defaultOption.legend, props.chartOption.legend || {}),
    xAxis: _.assign({}, defaultOption.xAxis, props.chartOption.xAxis, {
      data: props.chartData.axis
    }),
    yAxis: _.assign({}, defaultOption.yAxis, props.chartOption.yAxis || {}),
    series: _.map(props.chartData.series, ({ type, name, data, ...rest }) => {
      return {
        type: type || 'line',
        name,
        data,
        ...rest
      }
    })
  }
  return option
})
</script>

